@import '../variables.less';

//mdreport
@treeWidth: 300px;

.ui-mdreport {

  color: @mdreport-text-color;

  background: @mdreport-bg-color;

  font-size: 12px;

  border: 1px solid @common-border-color;

  position: relative;

  // report's node style
  .mdreportTreeNodeStyle() {
    > span {
      width: 16px;
      height: 34px;
      vertical-align: middle;
      display: inline-block;
      float: left;
      background: url(../../img/tree_icon.png?1) repeat-y;
    }
    .tree-node-blank-t {
      background-position: 0 center;
    }

    .tree-node-blank-l {
      background-position: -16px center;
    }

    .tree-node-blank-i {
      background-position: -63px center;
    }

    .tree-node-blank-t-p {
      background-position: -95px center;
    }
    .tree-node-blank-l-p {
      background-position: -47px center;
    }

    .tree-node-blank-t-m {
      background-position: -79px center;
    }
    .tree-node-blank-l-m {
      background-position: -31px center;
    }
    .tree-node-blank-none {
      background: none;
    }
  }

  .comment {
    padding: 5px 10px 5px 10px;
    color: @strong-text-color;
    line-height: 1.6;
    // background: url(../../img/ktip.png) 5px 0px no-repeat;
    text-align: left;
    &:before {
      content: '!';
      line-height: 15px;
      text-align: center;
      display: inline-block;
      width: 15px;
      height: 15px;
      background: #fc6;
      border-radius: 3px;
      color: #fff;
      margin-right: 5px;
    }
  }

  .credit {
    position: absolute;
    bottom: 6px;
    right: 7px;
  }

  .ui-mdreport-header {
    border-bottom: 1px solid @common-border-color;
    position: relative;
    height: 45px;
    line-height: 45px;
    text-align: left;
    background: @mdreport-header-bg-color;
    h2 {
      margin: 0 10px;
      font-size:14px;
      line-height: 45px;
    }
    time {
      font-size: 80%;
      color: @strong-text-color;
    }
    .ui-mdreport-timerange {
      color: @strong-text-color;
    }
    .tools {
      position: absolute;
      right: 5px;
      top: 0;
      height: 45px;
      line-height: 38px;
      a {
        color: @strong-text-color;
        font-size: 12px;
        text-decoration: none;
        margin: 0 5px;
        vertical-align: middle;
        &:active {
          color: @mdreport-active-color;
        }
      }
    }
  }
  .ui-mdreport-body {
    overflow-x: auto;
  }


  .loading-panel {
    position: absolute;
    left: 0;
    top: 31px;
    bottom: 0;
    width: 100%;
    display: none;

    .loading-box {
      height: 100%;
      background: @common-bg-color;
      background: @mdreport-loading-bg-color;
      overflow: hidden;
      text-align: center;
      line-height: 100px;
    }
  }

  ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .table-wrap {
    margin-left: @treeWidth;
    overflow-x: auto;
    overflow-y: auto;
    min-height: 300px;
  }

  .table {
    min-width: 100%;
    border-collapse: collapse;
    margin: -1px -1px 0 0;
    .tr {
      &:hover {
        background: @mdreport-hover-color;
      }
    }
    td, th {
      border: 1px solid @mdreport-border-color;
      line-height: 32px;
      word-wrap: normal;
      white-space: nowrap;
      padding: 1px 6px;
      text-align: center;
      &:first-child {
        border-left-width: 0;
      }
      &:last-child {
        border-right-width: 0;
      }
    }

    th {
      border-bottom-width: 1px;
      background: @mdreport-highlight-bg-color;
      vertical-align: middle;
      color: @strong-text-color;
      font-weight: @mdreport-thead-font-weight;
    }
    .tree-node {
      text-align: left;
      line-height: 34px;
      .tree-node-wrap{
        height: 34px;
        cursor: pointer;
      }
      .loading {
        background-size: 16px 16px;
      }

      .tree-node-span {
        display: inline-block;
        margin: 0;
        float: none;
        height: 34px;
        .mdreportTreeNodeStyle();
      }
      .tree-node-label {
        display: inline-block;
        padding-right: 10px;
        vertical-align: top;
        input[type="checkbox"] {
          margin: 0 2px 2px;
        }
      }

      .tree-node-wrap.active {
        background: @mdreport-hover-color;
        .tree-node-span, .tree-node-label {
          background: @mdreport-hover-color;
        }
      }

    }
    .sort {
      cursor: pointer;
      padding-right: 10px;
    }
    .sort-desc {
      background: url(../../img/sort-desc.png) right center no-repeat @mdreport-highlight-bg-color;
    }
    .sort-asc {
      background: url(../../img/sort-asc.png) right center no-repeat @mdreport-highlight-bg-color;
    }
  }
  .report-error-holder {
    height: 220px;
    line-height: 210px;
    font-size: 15px;
    text-align: center;
    color: #9a9a9a;
  }
  .nodata {
    border-bottom: 1px solid @mdreport-border-color;
    line-height: 30px;
  }
}